跳到主要内容

布局参数(Layout Parameters)

布局参数大致可以分为两类 — 影响父布局的参数和影响子布局的参数。

在 Rive 中,重要的是要记住布局参数通常只影响其他布局容器。这经常会导致为了达到预期效果而需要嵌套布局,但也为以创造性的方式与 Rive 的更自由形式的画布混合提供了机会。

绝对定位与相对定位(Absolute vs Relative)

要控制行、列或网格中子布局的流动,需要子项是相对定位的,即没有启用其绝对定位选项。使用布局检查器右上角的图标在绝对和相对布局之间切换。

图片

  • 绝对定位(Absolute): 绝对定位布局在画板或父布局容器内定位自己。它可以将其 2 个或更多边缘固定到容器上。
  • 相对定位(Relative): 相对定位布局的位置由父画板或布局定义。更改父级上的弹性属性将决定子布局的行为。

在绝对和相对布局之间切换是可以设置关键帧的。

缩放类型(Scale Types)

布局的宽度和高度可以使用 3 种不同的缩放行为:

  • 固定(Fixed): 布局的固定宽度或高度。定义的值可以是点数或百分比值。使用字段内的单位切换在值类型之间切换。
  • 包裹(Hug): 布局的宽度和/或高度收缩以适应其子项。例如,您可能希望布局包裹文本对象,根据内部文本的长度调整大小。
  • 填充(Fill): 布局的宽度和/或高度扩展以填充父布局或画板内的可用空间。填充选项将宽度/高度字段切换为分数,并显示基础大小字段。分数值使得可以控制具有填充缩放行为的多个子项之间的填充行为。例如,您可能希望子项平均填充可用空间,或者让一个子项的缩放比例大于其他子项。

在检查器中的宽度和高度字段下方可以找到设置缩放类型的选项。

图片

包裹和填充选项只会在适用时显示。例如,没有任何子项的布局不会显示包裹选项,而具有相对父级的布局没有可以填充的内容。

[接下来继续翻译...]

需要我继续翻译剩余部分吗?

尺寸约束(Size Constraints)

使用绝对定位切换旁边的图标来添加最小和/或最大宽度和高度值。与宽度和高度值本身一样,这些值可以定义为点数或百分比。

图片

裁剪(Clip)

裁剪切换可以隐藏布局中超出布局边界的任何子元素。

图片

位置(Position)

绝对定位布局提供了额外的选项来设置它们在画板或父布局中的位置。位置由至少 2 个固定边缘定义 — 一个水平和一个垂直,但也可以启用额外的边缘。

通过在检查器图形中选择标记或通过下方的字段来设置要固定的所需边缘。您可以在选择标记时按住 shift 来添加同一轴上的第二个边缘。从选定边缘的距离值可以通过在字段中选择所选单位类型来提供为点数或百分比。

图片

内边距和外边距(Padding and Margin)

应用于布局的内边距和外边距只会影响其他布局。

内边距和外边距可以沿轴对称应用,或应用于单个边缘。使用边缘切换来显示每个边缘的字段以及使用点数或百分比值的选项。

  • 内边距(Padding): 布局边界和任何相对布局子项之间的内部空间。
  • 外边距(Margin): 布局边界和相对父布局或画板之间的外部空间。

视频

布局子项(Layout Children)

布局的弹性参数只应用于其中包含的其他布局。为了生成可重排的内容行、列和网格,内容项本身必须包装在额外的布局容器中。

方向(Direction)

  • 行(Row): 沿水平轴布局子项。
  • 列(Column): 沿垂直轴布局子项。
  • 行反转(Row Reverse): 以相反的顺序沿水平轴布局子项。
  • 列反转(Column Reverse): 以相反的顺序沿垂直轴布局子项。

图片

换行(Wrap)

  • 不换行(No Wrap): 当内容达到布局边界时,继续延伸超出边界。
  • 换行(Wrap): 当内容达到布局边界时,将下一个项目放在当前行/列的下方或旁边。
  • 反向换行(Wrap Reverse): 与换行相同,但以相反的顺序显示内容。

图片

对齐(Alignment)

选择检查器小部件上的所需点来对齐布局容器中的内容。

图片

两端对齐(Justify)

点击当前对齐位置以展开内容以填充可用空间。再次选择活动图块将内容折叠回来。

图片

间距(Gap)

内容之间的间距(间隙)可以在水平和垂直方向上设置,并可以是点数或容器宽度/高度的百分比。

图片

非布局子项(Non-layout Children)

布局容器会以两种方式之一影响其子项:

  • 设置子项的位置
  • 同时设置子项的位置和大小

这种行为由子项的对象类型决定。由布局容器同时定义位置和大小的对象包括:

  • 文本(Text)
  • 图像(Images)
  • 参数化形状(Parametric shapes)(矩形、椭圆、三角形、多边形和星形)
  • 嵌套画板(Nested Artboards)
  • 其他布局容器(Other layout containers)

所有其他对象将只有其位置由布局设置。即将推出的 N-Slicing 功能将为更高级形状和组的布局/缩放行为提供更高级的选项。

与其他一些工具不同,Rive 将提供一个额外的层级项来表示对象的布局容器。虽然这一开始可能看起来很冗长,但它有助于区分 Rive 的自由形式特性与结构化布局系统。例如,布局容器中的对象仍然可以应用额外的变换,如位置、缩放和旋转,以使其突破布局。当与约束结合使用时,这变得特别强大。此外,布局容器可以容纳多个可以相互叠放的对象。